
<div class="progress no-rounded progress-striped active" >
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="avance">
  </div><!-- /.progress-bar .progress-bar-info -->
</div>

<form id="Form" method="post" action="<? echo base_url().'index.php/evaluacion/guardar_evaluacion'?>">
	<input name="id_perfil" type="hidden" value="<?=$preguntas[0]['id_perfil'];?>"/>
	<input name="id_evaluacion" type="hidden" value="<?=$id_evaluacion;?>"/>
	<input name="revision" type="hidden" value="<?=$revision;?>"/>
		<div class="panel with-nav-tabs panel-info">
		  <div class="panel-heading">
			<div class="right-content">
				<button class="btn btn-info btn-rounded-lg to-collapse" data-toggle="collapse" data-target="#panel-collapse-2"><i class="fa fa-chevron-up"></i></button>
			</div>
			<ul class="nav nav-tabs">
				<?php  $p=sizeof($preguntas);
					$fa=0;

				for ($i=0; $i <$p ; $i++) { 
					$a=($i==0) ? 'class="active"' : '' ;					
					if($fa!=$preguntas[$i]['id_factor']){
						$fa=$preguntas[$i]['id_factor'];
						$tab="tab".$fa;						
						$preguntas[$i]['factor']=ucwords($preguntas[$i]['factor']);					
						$faName=$preguntas[$i]['factor'];
						/////////////para paginar preguntas 
						$g=true;
						$h=$i;
						for ($j=$i; $j <$p &&$g ; $j++){
							if($fa!=$preguntas[$j]['id_factor']){ ///se busca si hay mas pregunas del mismo factor
								$g=false;
								$h=$j;
							}
						}
						if ($i+1==$h) {				 //cuando es una sola pregunta									
							$textt="$h";
						}elseif($g && ($i+1)!=$p){
							$h=$i+1;
							$textt="$h - $p";  // hay mas de una preguna y es la ultima pestaña
						}elseif($g&&($i+1)==$p){
							$textt="$p"; // una pregunta en la ultima pestaña 
						}else{							
							$g=$i+1;							
							$textt="$g - $h";  //cuando es mas de una pregunta y no es la ultima
						}

							//////fin de paginado de preguntas
					echo '
						<li '.$a.'><a href="#'.$tab.'"  class="pestania" data-toggle="" ><i data-original-title="'.$faName.'" data-toggle="tooltip">'.$textt.'</i></a></li>';  //data-toggle="tab" hay que agregar para que se habilite la navegacion
					}
					
				}	/////////////////////////Condicional para cuando no sean necesario la selecion de capacitaciones
					if ($revision==0) {
				?> 
				
				<li><a href="#TabCapacitaciones" class="pestania" data-toggle="">Capacitaciones</a></li> 
				
				<?php 	} 	?> 
				<li><a href="#TabFinalizar" class="pestania" data-toggle="">Finalizar</a></li> 
			</ul>
		  </div>		  
			<div id="panel-collapse-2" class="collapse in">
			  <div class="panel-body">
				<div class="tab-content">

	<?php 
		$i=0; //nesesario para los tab
		$id_factor_a; //para guardar el factor anterior
		$cont=true; //bandera saber si se creara un nuevo panel
		foreach ($preguntas as $k) { 
			if ($i==0) {
				$id_factor_a=$preguntas[$i]['id_factor'];				
				$tab="tab".$id_factor_a;
				$a='active in';
				$id_para_boton=$tab;
			}else{
				$a='';
			}


			if ($cont) {
					$fa=$k['factor'];												
			?>  
			
		  <div class="tab-pane fade <?php echo $a; ?>" id="<?php echo $tab; ?>" >		  	
			<fieldset>						
					<legend><?php echo $fa; ?></legend> 
		<?php }?>

				<div class=" form-group">
					<div class="row">
						<div class="col-lg-8">
							<?php echo $k['pregunta']; ?>
						</div>
						<div class="col-lg-2">
							<label class="control-label">Calificación</label>
							<input type="hidden" value="<?php echo $k['id_pregunta']; ?>" name="id_pregunta[]"></input>
							<input type="hidden" value="<?php echo $k['ponderacion']; ?>" class="ponderacion"></input>
							<input type="hidden" value="<?php echo $fa; ?>" class="factor"></input>
							<input type="hidden" value="<?php echo $k['id_factor']; ?>" class="id_factor"></input>														
							<select name="nota[]">
								<option value=""></option>

						 <?php 
						 	$s="";
						 	foreach($calificaciones as $val) { 
		                          $s.= '<option value="'.$val['id_calificacion'].'"';
		                          	if ($k['nota']==$val['id_calificacion']) { $s.='selected="selected"'; }
		                          $s.='>'.$val['calificacion'].'</option>';	                          
	                            } 
	                            echo $s;
	                        ?>
							</select>					
						</div>
					</div>
				</div><!-- /.form-group -->
				<div class=" form-group">
					<div ="row" >
						
						<div class="col-lg-7 justificacion_d" style="display:none">
							<label class="control-label">Justicación</label><br>							
							<textarea name="justificacion[]" style="width:100%;" class="justificacion_c"><?php echo $k['justificacion'];?></textarea>
						</div>
						<div class="justificacion_a" style="height:80px"> </div>
					</div>					
				</div>

			

			<?php  
		
		$i++; 				
			if (isset($preguntas[$i]['id_factor']) && $id_factor_a!=$preguntas[$i]['id_factor']) {
				$id_para_boton=$tab;
				$cont=true;
				$id_factor_a=$preguntas[$i]['id_factor'];
				$tab="tab".$id_factor_a;


			}else{
				$cont=false;
			}

			
			if ($cont||$i==$p) {
			if ($i==$p) {$id_para_boton=$tab; }
			 ?>
				</fieldset>
				<div class="row">
					<ul class="pager wizard">			
						<li class="PrevStep"></li><button class="btn btn-default " type="button" onClick="revisar_pestania('<?php echo $id_para_boton; ?>','PrevStep')">Anterior</button>
					  	<li class="NextStep"></li><button class="btn btn-default " type="button" onClick="revisar_pestania('<?php echo $id_para_boton; ?>','NextStep')">Siguiente</button>
					</ul>	
				</div>		  			
			      
			  </div><!-- end .tab$i  de preguntas -->
				  <?php 
	  		}//end if
			 
		}		
				/////////////////////CAPACITACIONES 
							if ($revision==0) {
		?>  
		<div class="tab-pane fade" id="TabCapacitaciones">
				<fieldset>					
				<legend> Capacitaciones</legend>
						<div class="row">
							<div class="form-group">
							 	<div class="col-lg-10">
							 			<label class="control-label">Seleccion de área</label>							 		
									<div class="row">
										<div class="col-lg-10"> 
											<select data-placeholder="Seleccione..." class="form-control chosen-select" tabindex="2" id="area" >
												<option value="">Seleccione...</option>
												<?php 
													$s="";
												foreach ($areas as $v) {
									 				$s.= '<option value="'. $v['id_area'].'" >'.ucwords($v['area']).'</option>';
									 			 } 
									 			 	echo $s;
									 			?>												
											</select>
											<small data-bv-validator="notEmpty" class="help-block" style="display: none;">Debe seleccionar una área</small>
										</div>
									</div>	<!---row select y boton -->		

								</div>
							</div>
						</div>					
						<div class="row">
							<div class="form-group">
							 	<div class="col-lg-10">
							 			<label class="control-label">Seleccion de capacitaciones</label>							 		
									<div class="row">
										<div class="col-lg-10"> 
											<select data-placeholder="Seleccione..." class="form-control chosen-select" tabindex="2" id="capacitacion" >															
											</select>
											<small data-bv-validator="notEmpty" class="help-block" style="display: none;">Debe seleccionar una capacitaciones</small>
										</div>
										<div class="col-lg-1"> 
											<button type="button" id="boton-local" class="btn btn-default"><i class="fa fa-plus-circle" ></i>Agregar</button>	
										</div>
									</div>	<!---row select y boton -->		

								</div>
							</div>
						</div><br>
								<div class="table-responsive row">
									<div class="col-lg-10"> 
						
									<table class="table table-th-block table-info" id="tabla-dinamica">
										<thead>
											<tr>												
												<th>Correlativo</th>
												<th>Capacitación</th>
												<th>Área</th>
												<th>Opciones</th>
											</tr>
										</thead>
										<tbody>
											
										</tbody>
									</table>
						
										</div><!-- /.col-lg-7 -->
								</div><!-- /.table-responsive -->					
				</fieldset>	
			<div class="row">
				<ul class="pager wizard">			
					<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>
				  	<li class="NextStep"><button class="btn btn-default " type="button">Siguiente</button></li>
				</ul>	
			</div>		  						


					</div><!-- /.tab-pane fade capacitaciones-->

					<?php } ?>
				<div class="tab-pane fade" id="TabFinalizar">
					<fieldset>					
						<legend> Finalizar</legend>
						<div class="table-responsive row">
							<div class="col-lg-10"> 
				
							<table class="table table-th-block table-info" id="tabla-dinamica2">
								<thead>
									<tr>												
										<th>N° de Factor</th>
										<th>Factor</th>
										<th >Calificación</th>										
										<th>Observación</th>	
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
							<p> <strong>Nota: <span id="notaG"></span></strong></p>
				
								</div><!-- /.col-lg-7 -->
						</div><!-- /.table-responsive -->
					</fieldset>	
						<div class="row">
							<div class="col-lg-7">
								Con relación al resultado de la Evaluación del desempeño recibido el día de hoy, manifiesto:								
							</div>

						</div><br>
						<div class="row">
							<div class="col-lg-7">
								<input type="radio" name="conformidad" value="1" checked="checked" > Conforme
								<input type="radio" name="conformidad" value="0"> Disconforme con el resultado
							</div>

						</div>
						<div class="row">
			    			<ul class="pager wizard">			
								<li class="PrevStep"><button class="btn btn-default " type="button">Anterior</button></li>			
								<li><button class="btn btn-info " type="submit">Guardar</button></li>
							</ul>	
						</div>			
					</div><!-- /.tab-pane fade finalizar-->
				</div><!-- /.tab-content -->

			  </div><!-- /.panel-body -->

			    <div class="panel-footer">

					
				</div>

			</div><!-- /.collapse in -->
		</div>
	</form>


<script type="text/javascript">
/////////////////////////////////////////////Para control de capacitaciones
var capacitaciones=[];
var capacitacion_source=<?php echo json_encode($capacitaciones); ?> 
$('#boton-local').click(function() {
	cap= $('#capacitacion').val();			
	det=cap.split('**');
	t1=getObjects(capacitaciones, 'id_capacitacion', det[0]);
	if (t1.length==0) {
		t2=getObjects(capacitaciones, 'id_area', det[1]);
		if (t2.length<3) {
			agregar(det);	
			mostrar_tabla();
		}else{
			$toast=toastr["info"]("El numero máximo de capacitaciones por áreas es 3, para agregar la seleccionada elimine una del área de "+det[2]);
		}
	}else{
		$toast=toastr["info"]("La capacitación seleccionada, ya ha sido agregada");
	}
	

})
function agregar(det) {
	sl= $("#capacitacion option:selected").text();
	capacitaciones.push({"id_capacitacion":det[0], "id_area":det[1],"area":det[2], "capacitacion_text":sl});
}

$('#area').change(function(e) {
	v=$(this).val();
	if(v==""){
		efecto_validacion ('#area',true);
	}else{
		efecto_validacion ('#area',false); 

		t=getObjects(capacitacion_source, 'id_area', v);//se buscan todas las capacitaciones de una misma area
		$('#capacitacion').empty();
			for (var i = 0; i < t.length; i++) {

				val=t[i].id_capacitacion+"**"+t[i].id_area+"**"+t[i].area;
				 $("<option />", {value: val, text: t[i].nombre}).appendTo($('#capacitacion'));

			};

		$('#capacitacion').trigger("chosen:updated");
	}

});

function mostrar_tabla () {
    			$('#tabla-dinamica tbody').empty();
    			var html="";    			
    			total=0
    			for (var i = 0; i < capacitaciones.length; i++) {
    				
    				input1='<input name="capacitaciones[]" value="'+capacitaciones[i].id_capacitacion+'" type="hidden"></input>';
    				

					fila='<tr>  '+
							'<td>'+(i+1)+input1+'</td>'+
							'<td>'+capacitaciones[i].capacitacion_text+'</td>'+
							'<td>'+capacitaciones[i].area+'</td>'+							
							'<td>	<button class="btn btn-default btn-xs" type="button"  onclick="eliminar_local('+i+')"><i class="fa fa-trash-o fa-2x"></i></button></td>'+
						'</tr>	';
				html+=fila;				
    			}

    			$('#tabla-dinamica tbody').html(html);

    	}

	function eliminar_local(ind) {
    		$('#eliminados').html($('#eliminados').html()+'<input name="eliminados[]" value="'+capacitaciones[ind].id_evaluacion+'" type="hidden" />');
    	
    	var temp = new Array();
    	var aux = 0;
		for (i=0;i<capacitaciones.length;i++) {
			if (i!=ind) {
					temp.push(capacitaciones[i]);
			}else{
				if(capacitaciones[i].asignado==1){ aux =capacitaciones[i].id_empleado;}
			}
		}

			capacitaciones=temp;
			mostrar_tabla();		

    	}
/////////////////////////////////////////////////////// Fin para control de capacitaciones
var modo_revision=0;
var revision=0; //cantidad de preguntas revisadas
var result;	
var resultxf;
var all_ok=false;	//para saber si falta alguna justificacion o pregunta
var MAX_CAMBIOS =3;
///////////////validaciones y barra de progreso
function verificar_contestadas () {
	tm=$("select[name='nota[]']").length;
	var i=0;			//cuenta las preguntas respondidas para saber que porcentaje de avance se tiene
	var html=""			//html de las obsercaciones
		result=[];		//resultado x pregunta
		resultxf=[];	//resultado x factor
	var	acumNota=0;		//acumulador de notas
	var acumPon=0;		//acumulador de ponderaciones
	var c="";			//calificacion en texto
		ft="";			//factor temporal, guarda el factor previo a la actual

			$("select[name='nota[]']").each(function( key, value ) { ///para cada pregunta	   				
	   				 
	   				 o="Pregunta "+(key+1)+": ";
	   				 v =$(value).val();
	   				 pon=Number($($('.ponderacion')[key]).val());

	   				if (v!=""){   ///if para saber estado de preguntas
	   					if(v<=2 && $($('.justificacion_c')[key]).val().length>20){
	   						i++;
	   						o+='<li class="fa fa-check">  </li><br>';
	   						
	   					}else{
	   						if(v>2) {
		   						i++;
		   					o+='<li class="fa fa-check">  </li><br>';
		   					
	   						}else{
	   							o+='<li class="fa fa-warning"> Falta Justicación </li><br>';
	   							
	   						}
	   					}
	   					nota=v*0.2*pon;

	   				}else{
	   					o+='<li class="fa fa-warning"> No respondida </li><br>';	   						   				
	   					nota=0;
	   				} 
	   				nota=Math.round(nota);	   				
	   				
	   					///fin de estado por pregunta
	   				f=$($('.factor')[key]).val();
	   				///comienzo de condiciones para agrupar por factor
	   				if(ft==f || key==0){ //cuando hay que seguir acumulando de un fator
	   					acumNota+=nota;	
	   					acumPon+=pon;
	   					html+=o;	   					
	   					
	   				}else{
	   					c=text_nota(acumPon,acumNota);
	   					
	   					resultxf.push({"factor":ft, "nota_text":c,"nota":acumNota, "observacion":html}); //se agrega el factor acterior
	   					//se inicializa las variables para el otro factor	
	   					acumNota=nota;
	   					acumPon=pon;
	   					html=o;
	   					

	   				}
	   				ft=f;
	   				c= $(value).find(":selected").text();
	   				result.push({"factor":f, "nota_text":c,"nota":nota, "observacion":o});
	   				
	});
	c=text_nota(acumPon,acumNota);
	resultxf.push({"factor":ft, "nota_text":c,"nota":acumNota, "observacion":html});		
	p=Math.round((i/tm)*100);
if (tm==i) {
	submit_evaluation1();
	all_ok=true;

}else{

	all_ok=false;
}
$('#avance').css("width",p+"%");
mostrar_tabla2();
return all_ok;
}
function mostrar_tabla2 () {
	
    			$('#tabla-dinamica2 tbody').empty();
    			var html="";    			
    			total=0
    			for (var i = 0; i < resultxf.length; i++) {
    				total+=Number(resultxf[i].nota);
    				nota_text=(enviado)?resultxf[i].nota_text:"";
					fila='<tr>  '+
							'<td>'+(i+1)+'</td>'+
							'<td ><a href="#" onClick="mostrar_factor('+i+')">'+resultxf[i].factor+'</a></td>'+
							'<td>'+nota_text+'</td>'+							
							'<td>'+resultxf[i].observacion+'</td>'+
						'</tr>	';
				html+=fila;				
    			}

    			$('#tabla-dinamica2 tbody').html(html);
    			
    			if (enviado) {
    				var nott=Number((total/500)*10);
    				nott=nott.toFixed(2);    				
    			}else{
    				nott="--"
    			}

    			$('#notaG').html(nott);
 

    	}

	$('#Form').bootstrapValidator({
	        message: 'Valor no valido',
            fields: {
                'nota[]': {
                    validators: {
                        notEmpty: {
                            message: 'Debe de seleccionar una calificación'
                        }
                    }
                },
                'justificacion[]': {
                    validators: {
                        notEmpty: {
                            message: 'Por favor justifique su respuesta'
                        },
                    	stringLength: {
	                        message: 'Debe ingresar un minimo de 20 caracteres y 120 como maximo ',
	                        min: 20,
	                        max: 120
	                	}
                    }
                }
            }
       }).on('submit',function(e) {
       		console.log("submit");
       		e.isDefaultPrevented();
       		if (all_ok) {
       			mandar();
       		}else{ //no esta bien
       			e.preventDefault();
       		}
       });
       //esta funcion se hizo para eliminar el validador una vez que las preguntas esten validadas
function mandar(argument) {	
				console.log("mandar");
       			$('#Form').bootstrapValidator('destroy');

       			//para que puedan enviarse los valores de las notas
       			$("select[name='nota[]']").each(function( key, value ) { 
					$(value).prop('disabled',false);
				});

       			setTimeout(function(){ $('#Form').submit(); }, 2000);
       				
}

 
 ////////////////////////////////////////////////////////////////////////////////Fin validaciones y barra de progreso
/////////////script para efectos

$("select[name='nota[]']").change(function(e) {
	var index = $( "select[name='nota[]']" ).index( this ); //index del select
	value=$(this).val()  //valor del elemento que cambio 
	if(value==1 || value==2){
		$($(".justificacion_d")[index]).fadeIn();		
	}else{
		$($(".justificacion_d")[index]).fadeOut();		
	}
	$($(".justificacion_c")[index]).val("");  //limpiar el campo
});
$( window ).resize(function(e) {///esto es puro efecto de visualizacion para que no se mire como se agrega la justificacion  			
		if($( window ).width()<=1200){
			$('.justificacion_a').css('display','none')
		}else{
			$('.justificacion_a').css('display','block')
		}
});
$("select[name='nota[]'], .justificacion_c").on('change',function (e) {
		verificar_contestadas();

})
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Funciones extras
function text_nota(ponderacion,nota) {

var text =<?php echo json_encode($calificaciones); ?>;
	ln=text.length;
	b=true;
	por= ponderacion/ln;
	ind=0;	 	
	for (var i = 0; i < ln && b; i++) {
		if(nota<=por*(i+1)){
			ind=i
			b=false;
		}	
	}
	return text[ind].calificacion;


}
function mostrar_factor (key) {
	$($('.pestania')[key]).click();	
}

///fin script para efectos
 var enviado=false; /// bandera para saber si ya se mando la primera evaluacion
function submit_evaluation1() {
	
	if (!enviado && modo_revision==0) { 
		enviado=true;
	$.ajax({         
			async:  true,          
			url:	base_url()+"/index.php/evaluacion/guardar_evaluacion_temp/",
			dataType:"json",         
			data: $('#Form').serializeArray(),
			method: "post",
		success: function(data){         
			
					if (data.status==0) {
						$toast=toastr["error"]("Error al enviar datos");
					}else{
						console.log("OK--guardada primera evaluacion");
						$toast=toastr["info"]("Evaluación completada, a partir de este momento puede hacer un maximo de "+MAX_CAMBIOS+" cambios");
						$(".pestania").attr( "data-toggle", "tab" );  //para habilitar la navegacion con pestaña
					}
	            },
	    error:function(data){            
	    		$toast=toastr["error"]("Se ha perdido la conexion con el servidor");
	        	            
	            }
	        }); 		
	}else{
			revision++;
			if (revision==MAX_CAMBIOS) {
					//////////inabilitar cambios

					$(".justificacion_c").each(function( key, value ) { 
						$(value).prop('readonly',true);
					});
	       			$("select[name='nota[]']").each(function( key, value ) { 
						$(value).prop('disabled',true);
					});
					$toast=toastr["info"]("Revisiones completadas");
			}
			$toast=toastr["info"]("Cambios restantes: "+(MAX_CAMBIOS-revision));			
	}
}

function revisar_pestania(idtab,boton) {
	
	var contTab=0;
	$("#"+idtab+" :input[name='nota[]']").each(function( key, value ) { ///para cada pregunta	   				
	   				 
	   				 v =$(value).val();
	   				 
   					if((v<=2 && $($("#"+idtab+" .justificacion_c")[key]).val().length>20) || v>2 ){
   						contTab++;	   						
   					}else{//no estan todos los datos en la pestaña
   						
   					} 				
	}); // fin de revision de tab
	if(contTab==$("#"+idtab+" :input[name='nota[]']").length){
		$("#"+idtab+" ."+boton).trigger( "click" );
	}


}


///UNICAMENTE SE EJECUTARA CUANDO ES UNA REVISION
<?php if ($revision==1) {?>


verificar_contestadas();

$("select[name='nota[]']").each(function( index, value ) { ///para cada pregunta	   				
	v =$(value).val();	
	if(v==1 || v==2){
		$($(".justificacion_d")[index]).fadeIn();		
	}else{
		$($(".justificacion_d")[index]).fadeOut();		
	}	
})
$(".pestania").attr( "data-toggle", "tab" );
modo_revision=1;
MAX_CAMBIOS=5;


<?php }?>
</script>				
           

